<template>
   <!-- 页面标题区 -->
    <a-row  class="page-content-header">
      <span class="title">{{routeName}}</span>
    </a-row>
    <a-row>
      <a-collapse v-model:activeKey="activeKey" ghost style="padding-top: 30px;width: 90%;margin-left: 40px;" >
        <template #expandIcon="{ isActive }">
          <PlusSquareOutlined v-if="!isActive"  style="font-size: 18px;margin-top: 6px;"></PlusSquareOutlined>
          <MinusSquareOutlined v-if="isActive"  style="font-size: 18px;margin-top: 6px;"></MinusSquareOutlined>
        </template>

        <a-collapse-panel :key="set.key" v-for="set in roleSetList">

          <template #header>
            <a-col :span="23"  style="font-size: 18px;">
              &emsp;&emsp;&nbsp;{{set.name}}
            </a-col>
            <a-col :span="1"  style="font-size: 20px;color: rgb(1, 114, 219);">
            <UserOutlined  style="size: 18px;" @click="showPlusModal"/></a-col>
          </template>

          <a-row style="background-color: rgba(242, 242, 242, 0.678);width: 100%;height: 60px;padding-left: 50px;">
            <a-col style="margin-left: 5px;font-size: 12px;padding-top: 18px;" v-for="children in set.children" >
              <a-tag color="#2db7f5" style="border-radius:5px;padding:3px 6px 5px 6px;font-size: 16px;">
                {{ children.role }} {{ children.tag }} 剩余{{ children.role }}天
              </a-tag>
            </a-col>

          </a-row>
        </a-collapse-panel>

      </a-collapse>


    </a-row>
</template>

<script setup>

import { computed } from 'vue';
import { useRoute } from 'vue-router';

import { PlusSquareOutlined,MinusSquareOutlined, UserAddOutlined,UserOutlined } from '@ant-design/icons-vue';
const route = useRoute(); // 使用 Vue Router 的钩子函数 useRoute 获取当前路由对象
// 计算属性，获取当前路由的元数据中的标题
const routeName = computed(() => route.meta.title);
// import { settingOutlined } from '@ant-design/icons-vue';
// const background = new URL('@/assets/login-bg.jpg', import.meta.url).href;

const roleSetList = [
  {
    key: 1, name: "零售管理平台(3)", children:
      [{ role: "管理员", tag: 999 },{ role:"员工",tag:30}, { role:"游客",tag:25}]
  },
  { key: 2, name: "群客多(2)" , children:
      [{ role: "客服", tag: "server" },{ role:"游客",tag:"gust"}]},
  { key: 3, name: "AI称管理平台(2)", children:
      [{ role: "创迹管理员", tag: "cuangjiadmin" },{ role:"默认厂商",tag:"changshangdefalut"}] },
]

</script>



<style lang="less" scoped>
.page-content-header{
  padding: 42px 24px 16px 60px;
}
.title {
      display: block;
      float: left;
      margin-bottom: 0;
      padding-right: 12px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      font-size: 24px;
      line-height: 32px;
    }
.container {
  display: flex;
  height: 100%;
  padding-top: 120px;
  flex-direction: column;
  align-items: center;
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }
}
</style>
